<extend name="en_us:Public:base" />
<block name="title">
    <title>QRInn - Coupon setting</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" media="all" href="__PUBLIC__/jslib/datepicker/css/foundation-datepicker.css" />
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=bdf8875f9e52f651ec877dc7073586ed">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/BookSettingPage/coupon.css?rev=8f4dcd97ecf9dec7e1514db3a1e05759">
</block>
<block name="document">
    <div id="doc" data-today="{:date('Y-m-d')}" data-end="{:date('Y-m-d',strtotime('+1 month'))}" class="container-above-md">
        <include file="en_us:Public:Include_control_navbar" navbar-menu-setting="active" />
        <div id="doc-body" class="row">
            <include file="en_us:Public:Include_booking_tab" booking-tab-coupon="active" />
            <div id="doc-center">
                <div id="doc-center-head" class="row">
                    <span id="doc-center-head-title">Coupon list</span>
                    <div id="doc-center-head-menu" class="pull-right">
                        <div class="btn-raised btn-primary addCoupon" data-toggle="modal" data-target="#addCouponModal">Add</div>
                    </div>
                </div> 
                <div id="couponListContainer">
                </div>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    
    <!--Set the unavailable date-->
    <div class="modal" id="calendarModal">
        <div class="modal-dialog modal-confirm" >
            <div class="modal-content">
                <div class="modal-header modal-header-member">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title">Set the unavailable date</div>
                </div>
                <div class="modal-body"> 
                    <div id="calendar-panel">
                        <div class="week-select flex-direction-row">
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='1'></span>
                                <span class="checkbox-label">MON</span>
                            </div>                           
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='2'></span>
                                <span class="checkbox-label">TUE</span>
                            </div>                           
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='3'></span>
                                <span class="checkbox-label">WED</span>
                            </div>                           
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='4'></span>
                                <span class="checkbox-label">THU</span>
                            </div>                           
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='5'></span>
                                <span class="checkbox-label">FRI</span>
                            </div>                           
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='6'></span>
                                <span class="checkbox-label">SAT</span>
                            </div>                          
                            <div class="flex-1">
                                <span class="checkbox-btn" data-week='0'></span>
                                <span class="checkbox-label">SUN</span>
                            </div>                       	
                        </div>
                        <div id="calendar-head" class="flex-direction-row">
                            <div class="flex-1 last-month disabled-time">Last month</div>
                            <div class="now-day"></div>
                            <div class="flex-1 next-month">Next month</div>
                        </div>
                        <div id="calendar"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-primary btn-raised" data-value="" id="calendarSubmitInfo">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
    
    <!--Coupon modification-->
    <div class="modal fade" data-backdrop="static" id="editCouponModal">
        <div class="modal-dialog sm-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-title">Coupon modification</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Name:</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" id="couponNameEdit" maxlength="15" autocomplete="off" placeholder="Please enter the security name" value="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Value:</label>
                            <div class="col-xs-6 flex-direction-row" >
                                <div class="coupon-type"><span></span></div>
                                <div class="request-money"><span></span></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Mopoints:</label>
                            <div class="col-xs-7"><div class="flex-1"><span class="coupon-number"></span></div></div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label"> Date Used:</label>
                            <div class="col-xs-5 flex-direction-row">
                                <input type="text" class="form-control flex-1"  id="startTimeEdit" autocomplete="off"  placeholder="Please enter the date as" value="2018-01-09">
                                <div class="flex-2">--</div>
                                <input type="text" class="form-control flex-1"  id="endTimeEdit" autocomplete="off"  placeholder="Please enter the date as" value="2018-02-10">
                            </div>
                            <div class="col-xs-4 flex-direction-row">
                                <a href="javascript:void(0);" class="control-label-last btn-link set-cannot-time">Set the unavailable date</a>
                            </div>
                            <div class="col-xs-7">
                                <div class="cannot-use"></div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 6px;">
                            <label class="col-xs-2 control-label">Users:</label>
                            <div class="col-xs-6 flex-direction-row use-crowd">
                                <div class="flex-1 list" data-crowd = '2'>
                                    <span class="checkbox-btn disabled"></span>
                                    <span class="checkbox-label">VIP</span>
                                </div>
                                <div class="flex-1 list" data-crowd = '3'>
                                    <span class="checkbox-btn disabled"></span>
                                    <span class="checkbox-label">Not VIP</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 6px;">
                            <label class="col-xs-2 control-label">Everyone:</label>
                            <div class="col-xs-10 number-container">
                                <div class="reduce-btn"></div>
                                <input  type="text" class="form-control input-num" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" id="inputUseNumberEdit" value="1" />
                                <div class="add-btn"></div>
                            </div>
                            <div class="col-xs-12" style="color: #ff6e40;font-size:12px ;"><div class="col-xs-2"></div>You can set users to grab one or more coupons, but only one coupon for each order</div>
                        </div>
                        <div class="form-group" style="margin-top: 6px;">
                            <label class="col-xs-2 control-label">Room type:</label>
                            <div class="col-xs-7">
                                <div class="flex-1">
                                    <span class="checkbox-btn active disabled"></span>
                                    <span class="checkbox-label">Common room</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 0;">
                            <label class="col-xs-2 control-label">Room type:</label>
                            <div class="col-xs-9">                               
                                <div class="flex-1">
                                    <span class="checkbox-btn all-room-type"></span>
                                    <span class="checkbox-label">All room type</span>
                                </div>
                            </div>
                            <div class="col-xs-8 room-type">
                                <volist name="roomTypeData" id="roomType">
                                    <div class="flex-3 list" data-value="{$roomType['id']}">
                                        <span class="checkbox-btn"></span>
                                        <span class="checkbox-label">{$roomType['name']}</span>
                                    </div>
                                </volist>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-primary btn-raised" data-value="" id="submitInfoEdit">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    

    <!--Add coupons-->
    <div class="modal fade" data-backdrop="static" id="addCouponModal">
        <div class="modal-dialog sm-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-title">Add coupons</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Name:</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" id="couponName" maxlength="15" autocomplete="off" placeholder="Please enter the security name" value="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Value:</label>
                            <div class="col-xs-7 flex-direction-row" >
                                <div class="dropdown">
                                    <ul class="dropdown-menu dropdown-menu-left addCouponMenu">
                                        <li class="active" data-value="1"><a href="javascript:void(0);">Money Off</a></li>
                                        <li data-value="2"><a href="javascript:void(0);">Discount</a></li>
                                    </ul>
                                    <a data-toggle="dropdown" id="couponType" class="without-min-width btn text-sm " data-value="1" href="javascript:void(0);"><span class="info">Money Off</span><span class="caret"></span></a>
                                </div>  
                                <div class="flex-1 control-label-mid">fill</div>
                                <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" class="form-control flex-1"  id="requestMoney"  maxlength="6" autocomplete="off" placeholder="Money" value="" />
                                <div class="flex-1 text-value control-label-mid">minus</div>
                                <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" class="form-control flex-1" id="requestSubtractMoney" maxlength="6" autocomplete="off" placeholder="Money" value="" />
                                <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" class="form-control flex-1 hidden" id="requestDiscountMoney" maxlength="1" autocomplete="off" placeholder="discount" value="" />
                            </div>
                            <div class="col-xs-3"><div class="control-label-last text-value-last"></div></div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">Mopoints:</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" id="number" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="20" autocomplete="off" placeholder="Please enter the number of securities" value="" />
                            </div>
                            <div class="col-xs-3"><div class="control-label-last">(0 is not limited)</div></div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label"> Date Used:</label>
                            <div class="col-xs-5 flex-direction-row">
                                <input type="text" class="form-control flex-1"  id="startTime" autocomplete="off"  placeholder="Please enter the date as" value="">
                                <div class="flex-2">--</div>
                                <input type="text" class="form-control flex-1"  id="endTime" autocomplete="off"  placeholder="Please enter the date as" value="">
                            </div>
                            <div class="col-xs-4 flex-direction-row">
                                <a href="javascript:void(0);" class="control-label-last btn-link set-cannot-time">Set the unavailable date</a>
                            </div>
                            <div class="col-xs-7">
                                <div class="cannot-use"></div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 6px;">
                            <label class="col-xs-2 control-label">Users:</label>
                            <div class="col-xs-6 flex-direction-row use-crowd">
                                <div class="flex-1 list" data-crowd = '2'>
                                    <span class="checkbox-btn"></span>
                                    <span class="checkbox-label">VIP</span>
                                </div>
                                <div class="flex-1 list" data-crowd = '3'>
                                    <span class="checkbox-btn"></span>
                                    <span class="checkbox-label">Not VIP</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 6px;">
                            <label class="col-xs-2 control-label">Everyone:</label>
                            <div class="col-xs-10 number-container">
                                <div class="reduce-btn"></div>
                                <input  type="text" class="form-control input-num" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" id="inputUseNumber" value="1" />
                                <div class="add-btn"></div>
                            </div>
                            <div class="col-xs-12" style="color: #ff6e40;font-size:12px ;"><div class="col-xs-2"></div>You can set users to grab one or more coupons, but only one coupon for each order</div>
                        </div>
                        <div class="form-group" style="margin-top: 6px;">
                            <label class="col-xs-2 control-label">Room type:</label>
                            <div class="col-xs-7">
                                <div class="flex-1">
                                    <span class="checkbox-btn active disabled"></span>
                                    <span class="checkbox-label">Common room</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 0;">
                            <label class="col-xs-2 control-label">Room type:</label>
                            <div class="col-xs-9">                               
                                <div class="flex-1">
                                    <span class="checkbox-btn all-room-type"></span>
                                    <span class="checkbox-label">All room type</span>
                                </div>
                            </div>
                            <div class="col-xs-8 room-type">
                                <volist name="roomTypeData" id="roomType">
                                    <div class="flex-3 list" data-value="{$roomType['id']}">
                                        <span class="checkbox-btn"></span>
                                        <span class="checkbox-label">{$roomType['name']}</span>
                                    </div>
                                </volist>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-primary btn-raised" data-value="" id="submitInfo">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!--Get the record-->
    <div class="modal fade" data-backdrop="static" id="recordCouponModal">
        <div class="modal-dialog sm-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-title">Get the record</div>
                </div>
                <div class="modal-body">
                    <div class="content-panel-body">
                        <table class="table content-panel-table">
                            <thead>
                                <tr>
                                    <th class="col-xs-1">No</th>
                                    <th class="col-xs-2">Name</th>
                                    <th class="col-xs-2">Phone number</th>
                                    <th class="col-xs-2">Get date</th>
                                    <th class="col-xs-1">Status</th>
                                    <th class="col-xs-2">Order No</th>
                                    <th class="col-xs-2">Expiration date</th>
                                </tr>
                            </thead>
                        </table>
                        <div id="recordListBody"></div>
                        <div id="recordListBodyEmpty" class="typo-text-black-light typo-subhead hidden">No records are available.</div>
                    </div>                    
                </div>
            </div>
        </div>
    </div>    
    <script type="text/html" id="templateRecord">
        <div class="record-content">
            <div class="col-xs-1 list">
                <div class="record-num"></div>
            </div>
            <div class="col-xs-2 list">
                <div class="record-name"></div>
            </div>
            <div class="col-xs-2 list">
                <div class="record-mobile"></div>
            </div>
            <div class="col-xs-2 list">
                <div class="record-time"></div>
            </div>
            <div class="col-xs-1 list">
                <div class="record-status"></div>
            </div>
            <div class="col-xs-2 list">
                <div class="record-order"></div>
            </div>
            <div class="col-xs-2 list">
                <div class="record-overdue"></div>
            </div>
        </div>
    </script>    
    <script type="text/html" id="templateCalendarDay">
        <div class="calendar-day">
            <span class="calendar-day-text"><span class="week-text"></span><br/><span class="day-text"></span></span>
        </div>
    </script>    
    <script type="text/html" id="templateCouponList">
        <div class="couponList" data-toggle="modal" data-target="#recordCouponModal">
            <div class="sign-top"><span class="used-coupon"></span>/<span class="unused-coupon"></span></div>
            <div class="figure">
                <p class="figure-coupon hidden">{$hotelDefaultSymbol}<span></span></p>
                <p class="discount-coupon hidden"><span></span>Discount</p>
                <p class="type-coupon"></p>
            </div>
            <div class="coupon-content">
                <p class="coupon-desc"></p>
                <p class="coupon-requirement"></p>
                <p class="coupon-time"><span class="start-time"></span>--<span class="end-time"></span></p>
            </div>
            <a href="javascript:void(0);" class="btn-link coupon-edit">Modify</a>
            <div class="not-applicable">
                <div class="not-room"></div>
            </div>
            <div class="coupon-delete"></div>
        </div>
    </script>    
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=86d1603450adbfec1e8503138339e44d"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/datepicker/js/foundation-datepicker.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/lunar/LunarCalendar.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/layer/layer.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookSettingPage/coupon.js?rev=2d38b03d87c24c6c1323296b64a9b794"></script>
</block>

